<template>
  <!-- <scroll-view :scroll-x="false" :scroll-y="true" :enable-back-to-top="true" @scroll="handleScroll">

  </scroll-view> -->
  <view class="page">
    <view class="top">top</view>
    <view class="content" @scroll="handleScroll">
      <view class="list">
        <view class="list-item" v-for="(item, index) in tableList" :key="item.id" :data-id="item.id" :data-index="index">
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="bottom">bottom</view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from "vue"

  const tableList = ref([])

  onMounted(() => {
    // 请求数据
    tableList.value = new Array(200).fill(0).map((item, index) => {
      return {
        id: index,
        name: `name-${index}`
      }
    })
  })

  const handleScroll = (e) => {
    console.log(e, e.target.scrollTop)
  }
</script>

<style lang="less" scoped>
uni-page-body {
  background-color: red !important;
  height: 100%;
  position: relative;
}


.page {
  background-color: blue;
  position: relative;
  height: 100%;
}

.top {
  height: 100px;
  background: yellow;
  position: fixed;
  left: 0;
  right: 0;
  // #ifndef H5
  top: var(--status-bar-height)px;
  // #endif
  // #ifdef APP-PLUS
  top: 0;
  // #endif
}

.bottom {
  height: 200px;
  background-color: yellowgreen;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 200px;
}


.list-item {
  text-align: center;
  height: 60px;
  line-height: 60px;
}

.list-item:nth-child(2n) {
  background-color: aquamarine;
}
</style>
